<template>
<div class="page-root">
    <!-- 对外提供的无头页面 -->
    <router-view v-if="s"></router-view>
    <!-- 业务页面 -->
    <template v-else>
        <!-- 已登录 -->
        <template v-if="isManualCheck">
            <router-view></router-view>
        </template>
    <template v-else>
        <template v-if="isLogined">
            <header-bar @userStatusChange="userStatusChange"/>
            <main class="main-container">
                <sidebar/>
                <transition name="component-fade" appear mode="out-in">
                    <router-view class="main-view"></router-view>
                </transition>
            </main>
        </template>
        <!-- 未登录 - 登陆页 -->
        <router-view v-else @userStatusChange="userStatusChange"></router-view>
    </template>
    </template>
</div>
</template>

<script>
/**
 * @file 首页文件
 *
 * @author zxq
 */

import '@/assets/iconfont/iconfont.css';
// iconfont
import '@/assets/base.less';
// 常用组件的样式
import 'element-ui/lib/theme-chalk/alert.css';
import 'element-ui/lib/theme-chalk/breadcrumb.css';
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/card.css';
import 'element-ui/lib/theme-chalk/date-picker.css';
import 'element-ui/lib/theme-chalk/dialog.css';
import 'element-ui/lib/theme-chalk/dropdown.css';
import 'element-ui/lib/theme-chalk/form.css';
import 'element-ui/lib/theme-chalk/loading.css';
import 'element-ui/lib/theme-chalk/menu.css';
import 'element-ui/lib/theme-chalk/message-box.css';
import 'element-ui/lib/theme-chalk/message.css';
import 'element-ui/lib/theme-chalk/icon.css';
import 'element-ui/lib/theme-chalk/input.css';
import 'element-ui/lib/theme-chalk/pagination.css';
import 'element-ui/lib/theme-chalk/popover.css';
import 'element-ui/lib/theme-chalk/progress.css';
import 'element-ui/lib/theme-chalk/submenu.css';
import 'element-ui/lib/theme-chalk/switch.css';
import 'element-ui/lib/theme-chalk/table.css';
import 'element-ui/lib/theme-chalk/table-column.css';
import 'element-ui/lib/theme-chalk/tabs.css';
import 'element-ui/lib/theme-chalk/tooltip.css';
import 'element-ui/lib/theme-chalk/row.css';
import 'element-ui/lib/theme-chalk/col.css';
import 'element-ui/lib/theme-chalk/carousel.css';
import 'element-ui/lib/theme-chalk/carousel-item.css';

import utiles from '@/components/utiles';
import sidebar from '@/components/sidebar';
import headerBar from '@/components/headerBar';

export default {
    name: 'App',
    components: {
        sidebar,
        headerBar
    },
    data() {
        return {
            // 是否已登录
            isLogined: utiles.getCurrentUser() !== null
        };
    },
    computed: {
        s() {
            return this.$route.query && this.$route.query.s;
        },
        isManualCheck(){
            return this.$route.path == "/manualcheck";
        }
    },
    mounted() {
    },
    methods: {

        /**
         * 用户登录状态改变
         *
         * @param {Boolean} status false: 退出登录，true: 登录成功
         */
        userStatusChange(status) {
            this.isLogined = status;
            if (status === false) {
                this.$router.push('/login');
            }
        }

    }
};
</script>

<style lang="less" scoped>
.page-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: rgba(0, 0, 0, .03);
    .main-container {
        flex: 1;
        display: flex;

        .main-view {
            flex: 1;
        }
    }
}

.accountingEntrySheetPopOver{
    border: 1px solid black;
}

.accountSubmitPopOver{
  margin:0;
  padding:0;
  border: 1px solid red;
}

.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.3s ease;
}
.component-fade-enter,
.component-fade-leave-to {
  opacity: 0;
}
</style>